<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="mesh-model-tree__main">
    <div class="header">
      <h3 class="head-title"><span class="title">处理报告</span></h3>
      <div class="upload-statistic">
        本次共选择 <el-link type="primary">{{ countVo.totalCount }}</el-link> 笔文件；被过滤的文件 <el-link type="danger" @click="showFilterFiles">{{ countVo.filterCount }}</el-link> 笔；已处理的文件 <el-link type="success">{{ countVo.notFilterCount }}</el-link> 笔，处理的文件具体信息如下：
      </div>
      <h3 class="head-title"><span class="title">处理结果</span></h3>
    </div>
    
    <div class="upload-result">
      <div :class="['left', props.active === 3 ? 'h100' : 'fourth-step']">
        <el-tree
          :data="treeList"
          :props="{ label: 'name', children: 'children' }"
          ref="refTree"
          highlight-current
          node-key="index"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :current-node-key="currentNodeKey"
          @node-click="nodeClick"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon class="icon-class" v-if="data?.children?.length > 0"><FolderOpened /></el-icon>
              <el-icon class="icon-class" v-else><FolderOpened /></el-icon>
              <span class="node-title"
                >{{ node.label }}
              </span>
            </span>
          </template>
        </el-tree>
      </div>
      <!-- <div class="split"></div> -->
      <div class="right">
        <el-table :data="tableData" :height="tableHeight">
          <el-table-column type="index" label="序号" fixed="left" width="80" />
          <el-table-column prop="fullFileName" label="文件名称" width="180"></el-table-column>
          <el-table-column prop="fileSizeWithUnit" label="文件大小" width="100"></el-table-column>
          <el-table-column prop="sectionName" label="部段名称">
          </el-table-column>
          <el-table-column prop="batchNumber" label="所属批次" width="100"></el-table-column>
          <el-table-column prop="modelNumber" label="所属机型" width="80"></el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <div>
                <el-button size="small" link type="primary" @click="handleTable('del', scope.row, scope.$index)">移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <FilterFiles 
    v-if="fileVisible"
    :fileVisible="fileVisible"
    :filterFiles="filterFiles"
    @handleEvent="handleEvent"
  />
</template>
<script name="FileTree" setup>
import FilterFiles from './FilterFiles.vue';
import { updatePart } from '@/api/elementsLibrary';
const props = defineProps(['active', 'data']);
const emit = defineEmits(['change', 'handleEvent']);
const zipData = ref(props?.data);
const fileVisible = ref(false);
const filterFiles = ref([]);
const formData = ref({ name: '', version: '' });
const modifyVisible = ref(false);
const defaultProps = { children: 'children', label: 'name' };
const queryParams = ref({ modelNumber: '',batchNumber: '', sectionNumber: '', childSectionNumber: '' });
const currentData = ref(null);
const nodeData = ref(null);
const currentNodeKey = ref(2);
const refTree = ref();
const treeList = ref({});
const tableData = ref([]);
const countVo = ref({});
const initTableData = ref([]);
//修改过的数据id集合
const modifyIds = ref([]);

// 通知父组件data已修改
const change = () => {
  emit('change', { changeData: zipData.value ,modifyDataIds:modifyIds.value});
};
const tableHeight = computed(() => {
  return 'calc(100% - 10px)';
});
const handleData = () => {
  emit('handleEvent', { type: 'confirmImport', data: { tableData: initTableData.value} });
};
const showFilterFiles = () => {
  filterFiles.value = initTableData.value.filter(item => item.filtered == 1);
  fileVisible.value = true;
}
//树点击事件
const nodeClick = (node, data) => {
  queryParams.value.modelNumber = null;
  queryParams.value.batchNumber = null;
  queryParams.value.sectionNumber = null;
  queryParams.value.childSectionNumber = null;
  nodeData.value = data;
  //执行查询
  if (data.level === 1) {
    queryParams.value.modelNumber = node.mark;
  }
  if (data.level === 2) {
    const parentId = data.parent.data.mark;
    queryParams.value.modelNumber = parentId;
    queryParams.value.batchNumber = node.mark;
  }
  if (data.level === 3) {
    const parentId = data.parent.parent.data.mark;
    const parentId1 = data.parent.data.mark;
    queryParams.value.modelNumber = parentId;
    queryParams.value.batchNumber = parentId1;
    queryParams.value.sectionNumber = node.mark;
  }
  if (data.level === 4) {
    const parentId = data.parent.parent.parent.data.mark;
    const parentId1 = data.parent.parent.data.mark;
    const parentId2 = data.parent.data.mark;
    queryParams.value.modelNumber = parentId;
    queryParams.value.batchNumber = parentId1;
    queryParams.value.sectionNumber = parentId2;
    queryParams.value.childSectionNumber = node.mark;
  }
  tableData.value = [];
  initTableData.value.forEach(item => {
    if (queryParams.value.modelNumber && queryParams.value.batchNumber && queryParams.value.sectionNumber && queryParams.value.childSectionNumber) {
      if (item.modelNumber == queryParams.value.modelNumber 
        && item.batchNumber == queryParams.value.batchNumber 
        && item.childSectionNumber == queryParams.value.childSectionNumber
        && item.sectionNumber == queryParams.value.sectionNumber && item.filtered == 0 && item.fileType == 'file') {
          tableData.value.push(item);
      }
    } else if (queryParams.value.modelNumber && queryParams.value.batchNumber && queryParams.value.sectionNumber) {
      if (item.modelNumber == queryParams.value.modelNumber 
        && item.batchNumber == queryParams.value.batchNumber 
        && item.sectionNumber == queryParams.value.sectionNumber && item.filtered == 0 && item.fileType == 'file') {
          tableData.value.push(item);
      }
    } else if (queryParams.value.modelNumber && queryParams.value.batchNumber) {
      if (item.modelNumber == queryParams.value.modelNumber 
        && item.batchNumber == queryParams.value.batchNumber && item.filtered == 0 && item.fileType == 'file') {
          tableData.value.push(item);
      }
    } else if (queryParams.value.modelNumber) {
      if (item.modelNumber == queryParams.value.modelNumber && item.filtered == 0 && item.fileType == 'file') {
          tableData.value.push(item);
      }
    } else {
      item.filtered == 0  && item.fileType == 'file' && tableData.value.push(item);
    }
  })
};

//点击事件handleTable
const handleEvent = (data) => {
  if (data?.type === 'cancelFileShow') {
    fileVisible.value = false;
  }
};
const handleTable = (type, row, index) => {
  if (type === 'edit') {
    modifyVisible.value = true;
    formData.value.version = data.versionNumber;
    formData.value.partNum = data.partNumber;
  }
  if (type === 'del') {
    ElMessageBox.confirm('数据移除后不会被导入，请确认是否移除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      tableData.value.splice(index, 1);
      row.filtered = 1;
      // initTableData.value = initTableData.value.filter(item => item.filtered == 0);
      initTableData.value.forEach(item => {
        if (item.id == row.id) {
          item.filtered = 1;
        }
      })
      // row.removeFlag = true;
      countVo.value.filterCount = initTableData.value.filter(item => item.filtered == 1 && item.fileType == 'file').length;
      countVo.value.notFilterCount = initTableData.value.filter(item => item.filtered == 0 && item.fileType == 'file').length;
    });
  }
};
const initData = () => {
  treeList.value = props.data?.treeNodeVoList || [];
  tableData.value = props.data?.collectVoList.filter(item => item.filtered == 0 && item.fileType == 'file') || [];
  initTableData.value = JSON.parse(JSON.stringify(props.data?.collectVoList || []));
  countVo.value = {
    totalCount: props.data?.countVo?.totalCount || 0,
    filterCount: props.data?.countVo?.filterCount || 0,
    notFilterCount: props.data?.countVo?.notFilterCount || 0
  };
}
onMounted(() => {
  initData();
});
defineExpose({
  initTableData
});
</script>
<style lang="scss" scoped>
.mesh-model-tree__main {
  width: 100%;
  height: 100%;
  padding: 10px;
  .upload-statistic {
    // font-size: 14px;
  }
  .node-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
  }
  .head-title {
    .title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      &::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 16px;
        margin-right: 5px;
        background-color: #409EFF;
        vertical-align: middle;
        margin-top: -3px;
      }
    }
  }
  .upload-result {
    display: flex;
    width: 100%;
    height: calc(100% - 74px);
    font-size: 12px;
    .left {
      width: 300px;
      height: 100%;
      overflow: auto;
      // &.fourth-step {
      //   height: calc(100% - 74px);
      // }
      .title {
        margin-bottom: 5px;
      }
      .custom-tree-node {
        display: flex;
        .icon-class {
          color: #ffcc66;
          font-size: 120%;
        }
        .node-title {
          padding-left: 5px;
          font-size: 12px;
          .modify_class {
            font-size: 12px;
            color: #409eff;
          }
        }
      }
    }
    .split {
      height: 100%;
      width: 2px;
      background: #dcdfe6;
      margin-right: 8px;
      margin-top: 20px;
      height: 100%;
      overflow: hidden;
    }
    .right {
      padding: 4px;
      width: calc(100% - 300px);
      height: 100%;
      // overflow: auto;
      .title {
        margin-bottom: 5px;
      }
    }
  }
}
</style>